<template>
  <div id="myorder">
    <div class="order_box">
      <!-- 头部订单状态选项卡 -->
      <div class="top_option">
        <span
          v-for="(item,index) in order_option"
          :key="index"
          :class="currentIndex === index ? 'bgcolor' : '' "
          @click="tab_option(index)"
        >{{item}}</span>
      </div>
      <!-- 全部订单模块 -->
      <div class="all_order" v-show="currentIndex === 0">
        <div class="top">
          <span>商品信息</span>
          <span>金额</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <!-- 每种状态下的商品列表 -->
        <div class="optstate" v-for="(item,index) in all_orderList" :key="index">
          <div class="state_top">
            <span>订单编号：{{item.orderNum}}</span>
            <span>下单时间：{{item.toOrdertime}}</span>
          </div>
          <div class="state_bot">
            <ul class="list">
              <li v-for="(opt,i) in item.orderDetail" :key="i">
                <img class="goodsimg" :src="opt.imgurl" alt />
                <div class="right">
                  <div class="top">
                    <span>{{opt.goodsdesc}}</span>
                  </div>
                  <div class="bot">
                    <span>{{opt.goodsprice}}元/件</span>
                    <span>
                      <img src="../../../assets/image/chenghao.png" alt />
                      {{opt.selectnum}}
                    </span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="price">
              <span>{{item.total}}元</span>
              <span>(含运费{{item.fee}}元)</span>
            </div>
            <div class="state">
              <span>{{item.orderState}}</span>
              <span>订单详情</span>
            </div>
            <div class="to_handle">
              <span>提醒发货</span>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
      <!-- 待付款模块 -->
      <div class="to_paid" v-show="currentIndex === 1">
        <div class="top">
          <span>商品信息</span>
          <span>金额</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <!-- 每种状态下的商品列表 -->
        <div class="optstate" v-for="(item,index) in all_orderList" :key="index">
          <div class="state_top">
            <span>订单编号：{{item.orderNum}}</span>
            <span>下单时间：{{item.toOrdertime}}</span>
          </div>
          <div class="state_bot">
            <ul class="list">
              <li v-for="(opt,i) in item.orderDetail" :key="i">
                <img class="goodsimg" :src="opt.imgurl" alt />
                <div class="right">
                  <div class="top">
                    <span>{{opt.goodsdesc}}</span>
                  </div>
                  <div class="bot">
                    <span>{{opt.goodsprice}}元/件</span>
                    <span>
                      <img src="../../../assets/image/chenghao.png" alt />
                      {{opt.selectnum}}
                    </span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="price">
              <span>{{item.total}}元</span>
              <span>(含运费{{item.fee}}元)</span>
            </div>
            <div class="state">
              <span>{{item.orderState}}</span>
              <span>订单详情</span>
            </div>
            <div class="to_handle">
              <span>立即支付</span>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
      <!-- 待发货模块 -->
      <div class="to_send" v-show="currentIndex === 2">
        <div class="top">
          <span>商品信息</span>
          <span>金额</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <!-- 每种状态下的商品列表 -->
        <div class="optstate" v-for="(item,index) in all_orderList" :key="index">
          <div class="state_top">
            <span>订单编号：{{item.orderNum}}</span>
            <span>下单时间：{{item.toOrdertime}}</span>
          </div>
          <div class="state_bot">
            <ul class="list">
              <li v-for="(opt,i) in item.orderDetail" :key="i">
                <img class="goodsimg" :src="opt.imgurl" alt />
                <div class="right">
                  <div class="top">
                    <span>{{opt.goodsdesc}}</span>
                  </div>
                  <div class="bot">
                    <span>{{opt.goodsprice}}元/件</span>
                    <span>
                      <img src="../../../assets/image/chenghao.png" alt />
                      {{opt.selectnum}}
                    </span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="price">
              <span>{{item.total}}元</span>
              <span>(含运费{{item.fee}}元)</span>
            </div>
            <div class="state">
              <span>{{item.orderState}}</span>
              <span @click="todetail()">订单详情</span>
            </div>
            <div class="to_handle">
              <span>提醒发货</span>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
      <!-- 待收货模块 -->
      <div class="to_take" v-show="currentIndex === 3">
        <div class="top">
          <span>商品信息</span>
          <span>金额</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <!-- 每种状态下的商品列表 -->
        <div class="optstate" v-for="(item,index) in all_orderList" :key="index">
          <div class="state_top">
            <span>订单编号：{{item.orderNum}}</span>
            <span>下单时间：{{item.toOrdertime}}</span>
          </div>
          <div class="state_bot">
            <ul class="list">
              <li v-for="(opt,i) in item.orderDetail" :key="i">
                <img class="goodsimg" :src="opt.imgurl" alt />
                <div class="right">
                  <div class="top">
                    <span>{{opt.goodsdesc}}</span>
                  </div>
                  <div class="bot">
                    <span>{{opt.goodsprice}}元/件</span>
                    <span>
                      <img src="../../../assets/image/chenghao.png" alt />
                      {{opt.selectnum}}
                    </span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="price">
              <span>{{item.total}}元</span>
              <span>(含运费{{item.fee}}元)</span>
            </div>
            <div class="state">
              <span>{{item.orderState}}</span>
              <span>订单详情</span>
            </div>
            <div class="to_handle">
              <span>确认收货</span>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
      <!-- 已完成模块 -->
      <div class="finished" v-show="currentIndex === 4">
        <div class="top">
          <span>商品信息</span>
          <span>金额</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <!-- 每种状态下的商品列表 -->
        <div class="optstate" v-for="(item,index) in all_orderList" :key="index">
          <div class="state_top">
            <span>订单编号：{{item.orderNum}}</span>
            <span>下单时间：{{item.toOrdertime}}</span>
          </div>
          <div class="state_bot">
            <ul class="list">
              <li v-for="(opt,i) in item.orderDetail" :key="i">
                <img class="goodsimg" :src="opt.imgurl" alt />
                <div class="right">
                  <div class="top">
                    <span>{{opt.goodsdesc}}</span>
                  </div>
                  <div class="bot">
                    <span>{{opt.goodsprice}}元/件</span>
                    <span>
                      <img src="../../../assets/image/chenghao.png" alt />
                      {{opt.selectnum}}
                    </span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="price">
              <span>{{item.total}}元</span>
              <span>(含运费{{item.fee}}元)</span>
            </div>
            <div class="state">
              <span>{{item.orderState}}</span>
              <span>订单详情</span>
            </div>
            <div class="to_handle">
              <span>提醒发货</span>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order_option: ["全部订单", "待付款", "待发货", "待收货", "已完成"], //订单状态选项
      currentIndex: 0, //头部状态选项卡默认下表
      all_orderList: [
        {
          orderState: "待支付", //订单状态 如 待支付  已完成 待发货 待收货等
          orderNum: "789456123231456", //订单编号
          toOrdertime: "2019-07-10 14:40", //下单时间
          total: 800, //总价以及是否含运费
          fee: 20.0, //运费
          orderDetail: [
            {
              imgurl: "", //商品图片url
              goodsdesc:
                "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
              goodsprice: "120.0", //商品价格(单价)
              selectnum: 2 //选择该商品的数量
            },
            {
              imgurl: "", //商品图片url
              goodsdesc:
                "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
              goodsprice: "120.0", //商品价格
              selectnum: 2 //选择该商品的数量
            }
          ] //商品详情
        },
        {
          orderState: "已完成", //订单状态 如 待支付  已完成 待发货 待收货等
          orderNum: "886456123231456", //订单编号
          toOrdertime: "2020-07-10 14:40", //下单时间
          total: 800, //总价
          fee: 20.0, //运费
          orderDetail: [
            {
              imgurl: "", //商品图片url
              goodsdesc:
                "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
              goodsprice: "120.0", //商品价格
              selectnum: 2 //选择该商品的数量
            },
            {
              imgurl: "", //商品图片url
              goodsdesc:
                "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
              goodsprice: "120.0", //商品价格
              selectnum: 2 //选择该商品的数量
            }
          ]
        },
        {
          orderState: "待发货", //订单状态 如 待支付  已完成 待发货 待收货等
          orderNum: "2021-07-10 14:40", //订单编号
          toOrdertime: "447456123231456", //下单时间
          total: 800, //总价
          fee: 20.0, //运费
          orderDetail: [
            {
              imgurl: "", //商品图片url
              goodsdesc:
                "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
              goodsprice: "120.0", //商品价格
              selectnum: 2 //选择该商品的数量
            }
          ]
        }
      ] //全部订单
    };
  },
  methods: {
    tab_option(i) {
      this.currentIndex = i;
    },
    todetail(){
      this.$router.push({path:"/personalCenter/order_detail"})
    }
  }
};
</script>

<style  lang="scss" scoped>
.order_box {
  width: 940px;
  min-height: 900px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 0px rgba(204, 196, 196, 0.15);
  padding: 20px;
  box-sizing: border-box;
  .top_option {
    display: flex;
    align-items: center;
    span {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 30px;
      padding: 10px;
      border-bottom: 2px solid #fff;
    }
  }
  // 全部订单
  .all_order {
    width: 100%;
    .top {
      margin: 15px 0;
      width: 100%;
      height: 40px;
      background-color: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(1) {
        margin-left: 30px;
      }
      & span:nth-of-type(2) {
        margin-left: 330px;
      }
      & span:nth-of-type(3) {
        margin-left: 154px;
      }
      & span:nth-of-type(4) {
        margin-left: 154px;
      }
    }
    .optstate {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(230, 230, 230, 1);
      .state_top {
        background-color: rgba(245, 245, 245, 1);
        height: 32px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        & span:nth-of-type(1) {
          margin-left: 20px;
        }
        & span:nth-of-type(2) {
          margin-left: 240px;
        }
      }
      .state_bot {
        display: flex;
        min-height: 124px;
        justify-content: space-between;
        .list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 320px;
          padding: 14px;
          margin-top: 0px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          li:last-child {
            margin-bottom: 0px;
          }

          li {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;
            .goodsimg {
              flex: 1;
              width: 100px;
              height: 100px;
              border: 1px solid gray;
            }
            .right {
              flex: 2;
              display: flex;
              flex-direction: column;
              align-content: space-between;
              .top {
                margin-top: -18px;
                background-color: #fff;
                padding: 0;
                span {
                  margin-left: 10px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  line-height: 18px;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                }
              }
              .bot {
                display: flex;
                margin-top: -8px;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                span {
                  margin-left: -20px;
                }
                & span:nth-of-type(1) {
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(254, 44, 74, 1);
                }
                & span:nth-of-type(2) {
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                  margin-left: 8px;
                  img {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }
          }
        }
        .price {
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          & span:nth-of-type(1) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 10px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
          }
        }
        .state {
          flex: 1;
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & span:nth-of-type(1) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 8px;
            margin-top: 6px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(77, 77, 77, 1);
            cursor: pointer;
          }
        }
        .to_handle {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 36px;
            background: rgba(17, 131, 217, 1);
            border-radius: 6px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
    .page {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // 待付款
  .to_paid {
    width: 100%;
    .top {
      margin: 15px 0;
      width: 100%;
      height: 40px;
      background-color: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(1) {
        margin-left: 30px;
      }
      & span:nth-of-type(2) {
        margin-left: 330px;
      }
      & span:nth-of-type(3) {
        margin-left: 154px;
      }
      & span:nth-of-type(4) {
        margin-left: 154px;
      }
    }
    .optstate {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(230, 230, 230, 1);
      .state_top {
        background-color: rgba(245, 245, 245, 1);
        height: 32px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        & span:nth-of-type(1) {
          margin-left: 20px;
        }
        & span:nth-of-type(2) {
          margin-left: 240px;
        }
      }
      .state_bot {
        display: flex;
        min-height: 124px;
        justify-content: space-between;
        .list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 320px;
          padding: 14px;
          margin-top: 0px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          li:last-child {
            margin-bottom: 0px;
          }

          li {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;
            .goodsimg {
              flex: 1;
              width: 100px;
              height: 100px;
              border: 1px solid gray;
            }
            .right {
              flex: 2;
              display: flex;
              flex-direction: column;
              align-content: space-between;
              .top {
                margin-top: -18px;
                background-color: #fff;
                padding: 0;
                span {
                  margin-left: 10px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  line-height: 18px;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                }
              }
              .bot {
                display: flex;
                margin-top: -8px;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                span {
                  margin-left: -20px;
                }
                & span:nth-of-type(1) {
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(254, 44, 74, 1);
                }
                & span:nth-of-type(2) {
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                  margin-left: 8px;
                  img {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }
          }
        }
        .price {
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          & span:nth-of-type(1) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 10px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
          }
        }
        .state {
          flex: 1;
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & span:nth-of-type(1) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 8px;
            margin-top: 6px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(77, 77, 77, 1);
            cursor: pointer;
          }
        }
        .to_handle {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 36px;
            background: rgba(240, 58, 88, 1);
            border-radius: 6px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
    .page {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // 待发货
  .to_send {
    width: 100%;
    .top {
      margin: 15px 0;
      width: 100%;
      height: 40px;
      background-color: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(1) {
        margin-left: 30px;
      }
      & span:nth-of-type(2) {
        margin-left: 330px;
      }
      & span:nth-of-type(3) {
        margin-left: 154px;
      }
      & span:nth-of-type(4) {
        margin-left: 154px;
      }
    }
    .optstate {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(230, 230, 230, 1);
      .state_top {
        background-color: rgba(245, 245, 245, 1);
        height: 32px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        & span:nth-of-type(1) {
          margin-left: 20px;
        }
        & span:nth-of-type(2) {
          margin-left: 240px;
        }
      }
      .state_bot {
        display: flex;
        min-height: 124px;
        justify-content: space-between;
        .list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 320px;
          padding: 14px;
          margin-top: 0px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          li:last-child {
            margin-bottom: 0px;
          }

          li {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;
            .goodsimg {
              flex: 1;
              width: 100px;
              height: 100px;
              border: 1px solid gray;
            }
            .right {
              flex: 2;
              display: flex;
              flex-direction: column;
              align-content: space-between;
              .top {
                margin-top: -18px;
                background-color: #fff;
                padding: 0;
                span {
                  margin-left: 10px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  line-height: 18px;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                }
              }
              .bot {
                display: flex;
                margin-top: -8px;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                span {
                  margin-left: -20px;
                }
                & span:nth-of-type(1) {
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(254, 44, 74, 1);
                }
                & span:nth-of-type(2) {
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                  margin-left: 8px;
                  img {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }
          }
        }
        .price {
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          & span:nth-of-type(1) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 10px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
          }
        }
        .state {
          flex: 1;
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & span:nth-of-type(1) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 8px;
            margin-top: 6px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(77, 77, 77, 1);
            cursor: pointer;
          }
        }
        .to_handle {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 36px;
            background: rgba(17, 131, 217, 1);
            border-radius: 6px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
    .page {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // 待收货
  .to_take {
    width: 100%;
    .top {
      margin: 15px 0;
      width: 100%;
      height: 40px;
      background-color: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(1) {
        margin-left: 30px;
      }
      & span:nth-of-type(2) {
        margin-left: 330px;
      }
      & span:nth-of-type(3) {
        margin-left: 154px;
      }
      & span:nth-of-type(4) {
        margin-left: 154px;
      }
    }
    .optstate {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(230, 230, 230, 1);
      .state_top {
        background-color: rgba(245, 245, 245, 1);
        height: 32px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        & span:nth-of-type(1) {
          margin-left: 20px;
        }
        & span:nth-of-type(2) {
          margin-left: 240px;
        }
      }
      .state_bot {
        display: flex;
        min-height: 124px;
        justify-content: space-between;
        .list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 320px;
          padding: 14px;
          margin-top: 0px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          li:last-child {
            margin-bottom: 0px;
          }

          li {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;
            .goodsimg {
              flex: 1;
              width: 100px;
              height: 100px;
              border: 1px solid gray;
            }
            .right {
              flex: 2;
              display: flex;
              flex-direction: column;
              align-content: space-between;
              .top {
                margin-top: -18px;
                background-color: #fff;
                padding: 0;
                span {
                  margin-left: 10px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  line-height: 18px;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                }
              }
              .bot {
                display: flex;
                margin-top: -8px;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                span {
                  margin-left: -20px;
                }
                & span:nth-of-type(1) {
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(254, 44, 74, 1);
                }
                & span:nth-of-type(2) {
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                  margin-left: 8px;
                  img {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }
          }
        }
        .price {
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          & span:nth-of-type(1) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 10px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
          }
        }
        .state {
          flex: 1;
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & span:nth-of-type(1) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 8px;
            margin-top: 6px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(77, 77, 77, 1);
            cursor: pointer;
          }
        }
        .to_handle {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 36px;
           background:rgba(34,172,56,1);
            border-radius: 6px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
    .page {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // 已完成
  .finished {
    width: 100%;
    .top {
      margin: 15px 0;
      width: 100%;
      height: 40px;
      background-color: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(1) {
        margin-left: 30px;
      }
      & span:nth-of-type(2) {
        margin-left: 330px;
      }
      & span:nth-of-type(3) {
        margin-left: 154px;
      }
      & span:nth-of-type(4) {
        margin-left: 154px;
      }
    }
    .optstate {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(230, 230, 230, 1);
      .state_top {
        background-color: rgba(245, 245, 245, 1);
        height: 32px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        & span:nth-of-type(1) {
          margin-left: 20px;
        }
        & span:nth-of-type(2) {
          margin-left: 240px;
        }
      }
      .state_bot {
        display: flex;
        min-height: 124px;
        justify-content: space-between;
        .list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 320px;
          padding: 14px;
          margin-top: 0px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          li:last-child {
            margin-bottom: 0px;
          }

          li {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;
            .goodsimg {
              flex: 1;
              width: 100px;
              height: 100px;
              border: 1px solid gray;
            }
            .right {
              flex: 2;
              display: flex;
              flex-direction: column;
              align-content: space-between;
              .top {
                margin-top: -18px;
                background-color: #fff;
                padding: 0;
                span {
                  margin-left: 10px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  line-height: 18px;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                }
              }
              .bot {
                display: flex;
                margin-top: -8px;
                align-items: center;
                padding-left: 30px;
                box-sizing: border-box;
                span {
                  margin-left: -20px;
                }
                & span:nth-of-type(1) {
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(254, 44, 74, 1);
                }
                & span:nth-of-type(2) {
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: rgba(77, 77, 77, 1);
                  margin-left: 8px;
                  img {
                    width: 10px;
                    height: 10px;
                  }
                }
              }
            }
          }
        }
        .price {
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          & span:nth-of-type(1) {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 10px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
          }
        }
        .state {
          flex: 1;
          width: 40px;
          border-right: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & span:nth-of-type(1) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            margin-bottom: 8px;
            margin-top: 6px;
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(77, 77, 77, 1);
            cursor: pointer;
          }
        }
        .to_handle {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 36px;
            background: rgba(17, 131, 217, 1);
            border-radius: 6px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
    .page {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
// 头部订单状态栏切换时下方横线
.bgcolor {
  border-bottom: 2px solid rgba(240, 58, 88, 1) !important;
  color: rgba(240, 58, 88, 1) !important;
}
</style>
